<template>
    <ul class="productList">
        <li v-for="dt in lists" :key="dt.goodsId" @click="goDetail(dt)">
            <a>
                <div class="imgbbox">
                    <Image :url="dt.imagesUrl"/>
                </div>
                <div class="listTxt">
                    <div class="title">{{dt.title}}</div>
                    <div class="artlist">艺术家：{{dt.artistName}}</div>
                    <div class="price">现价<span>¥<b v-if="dt.currentPrice">{{dt.currentPrice.decimalTwoString}}</b></span></div>
                </div>
            </a>
            <div class="status" v-if="dt.auctionStatus==1">
                预告，拍卖开始时间：{{dt.auctionStartTime}}
            </div>
            <div class="status" v-else-if="dt.auctionStatus==2">
                拍卖中，拍卖结束时间：{{dt.auctionEndTime}}
            </div>
            <div class="status" v-if="dt.auctionStatus==3">
                拍卖结束，拍卖结束时间：{{dt.auctionEndTime}}
            </div>
        </li>
    </ul>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import { mt } from '@/utils/common'
export default {
    props:{
        lists:Array
    },
    components:{
        Image
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        const goDetail = o=>{
            router.push(`/home/auction/${o.goodsId}`) 
        }

        return{
            ...toRefs(state),
            goDetail,
            mt
        }
    }
}
</script>

<style lang="scss" scoped>
    .productList{
        list-style: none;
        padding: 0;
        padding-bottom: 0;
        margin: 0;
        font-size: 26px;
        li{   
            width: 100%;
            margin: 0 0 30px 0;
            padding: 0 0 30px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            a{
                display: flex;
                max-height: 255px;
                width: 100%;
                padding: 0;
                .imgbbox{
                    display: block;
                    width: 140px;
                    height: 160px;
                }
                .listTxt{
                    flex: 1;
                    padding: 4px 0 0 20px;
                    .title{
                        line-height: normal;
                        overflow: hidden;
                    }
                    .artlist{
                        font-weight: 400;
                        color: rgba(255, 255, 255, 0.5);
                        line-height: normal;
                        margin: 15px 0 0 0;
                        overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    .price{
                        height: 36px;
                        line-height: 36px;
                        margin: 24px 0 0 0;
                        font-size: 24px;
                        text-align: right;
                        color: rgba(244, 194, 139, 0.5);
                        span{   
                            color: var(--baseColor);
                            padding: 0 0 0 10px;
                            b{
                                font-size: 38px;
                                font-weight: 500;
                                padding: 0 0 0 4px;
                            }
                        }
                    }
                }
            }
            .status{
              height: 60px;
              line-height: 60px;
              text-align: center;  
              font-size: 26px;
              margin: 20px 0 0 0;
              height: 56px;
              background: rgba(196, 141, 69, 0.7);
              &.doing{
                background: rgba(25, 99, 201, 0.7);
              }
              &.over{
                background: rgba(110, 113, 117, 0.7);
              }
            }
        }
    }
</style>